vue组件通讯之provide / inject

#vue组件通讯之provide / inject| 来源: 网络整理| 查看: 265

vue组件通讯之provide / inject 原创

Fly丶知秋 2023-03-06 03:41:15 博主文章分类：vue ©著作权

文章标签 vue provide / inject ide 字符串搜索文章分类 Python 后端开发

©著作权归作者所有：来自51CTO博客作者Fly丶知秋的原创作品，请联系作者获取转载授权，否则将追究法律责任

什么是 provide / inject [传送门]

vue的组件通讯方式我们熟知的有 props $emit bus vuex ,另外就是 provide/inject

provide/inject

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。如果你熟悉 React，这与 React 的上下文特性很相似。

provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。

inject 选项应该是：

一个字符串数组，或一个对象，对象的 key 是本地的绑定名，value 是：在可用的注入内容中搜索用的 key (字符串或 Symbol)，或一个对象，该对象的： from 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol) default 属性是降级情况下使用的 value

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

并且文档中有如下提示：provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

使用的例子：

// 父级组件提供 'foo'var Provider = { provide: { foo: 'bar' },}

// 子组件注入 'foo'var Child = { inject: ['foo'], created () { console.log(this.foo) // => "bar" }}

赞收藏评论分享举报

上一篇：vue组件keepAlive的使用

下一篇：组件toast(类似于element-ui的message组件)的实现

【本文地址】

今日新闻